<template>
	<view class="bg-color-item br-8 market-card pa-4" @click="toDetails" v-if="market.id">
		<view class="img">
			<image style="width: 330rpx;height: 330rpx;border-radius: 16rpx;" :src="$ossUrl + market.product.listimg"></image>
			<!-- <view class="info flex flex-center font-size-12 font-color-white" v-if="market.goods_type!=1" >
				{{handleLang('流通量')}}
				<text class='ml-4 bold'>{{market.flux}}</text>份
			</view> -->
			<!-- <view class="level" v-if="market.collection_level">
				<w-icon class="icon" name="level" size="28"></w-icon>
				<view class="level-bg">{{ market.collection_level }}</view>
			</view> -->
			<!-- <view class="market-out" v-if="market.is_out">
				<w-image width="65" mode='widthFix' src='/static/bg/market-out1.png'></w-image>
			</view> -->
			<view @click.stop="changeLike(market)" class="star-box flex flex-ai-center flex-js-center">
				<u-icon name="star-fill" color="#ea1f15" size="17" v-if="market.is_like"></u-icon>
				<u-icon name="star" color="#999999" size="17" v-else></u-icon>
			</view>		
		</view>
		<view class="pt-4 pb-4 plr-4" v-if="market.product">
			<view class="font-size-14 font-color-textPrimary text-overflow-1 font-w-500" style="max-width: 264rpx;">
				{{market.product.name && handleLang(market.product.name)}}
			</view>
			<view class="flex flex-ai-center mt-8" style="gap: 6rpx;">
				<view class="number-box">发行{{ market.total_num }}</view>
				<view class="number-box">流通{{ market.flux }}</view>
				<view class="number-box">成交{{ market.all_sale_num }}</view>
			</view>
			<!-- <view class="flex mt-4"><w-tag v-if="market.product&&market.goods_type!=1" name="限量" :value="`${market.product.total_num}份`"></w-tag></view> -->
			<view class="flex flex-ai-end font-color-textPrimary mt-8" style="line-height: 32rpx;">
				<view v-if="!market.is_out" class="font-size-14 text-right">
					<text>￥{{market.goods_type!=1? market.min_price:market.price}}</text>
					<text class="ml-2">{{market.goods_type!=1&&market.min_price!='--'? handleLang('起'):''}}</text>
				</view>
				<view class="flex flex-ai-center font-size-14" v-else>
					<view>￥--</view>
				</view>
			</view>
		</view>
	</view>
<!-- 	<view class="item-box" :style="{height:height + 'rpx'}" v-if="market.id" @click="toDetails">
		<image :src="$ossUrl + market.product.listimg" style="width: 100%;height: 100%;border-radius: 24rpx;" mode="aspectFill"></image>
		<view class="info-box plr-8 pb-8">
			<view class="info pa-8">
				<view class="font-color-white font-size-14">{{market.product.name && handleLang(market.product.name)}}</view>
				<view class=" font-size-12 font-color-white mt-4">
					<text class="">流通 <text class="font-w-500 ml-2"> {{market.flux}}</text>份</text>
				</view>	
				<view class="flex-center-sb font-color-white mt-4">
					<w-tag size="mini" v-if="market.product" name="限量" :value="`${market.product.total_num}份`"></w-tag>
					<view v-if="!market.is_out" class="font-size-14 text-right">
						<text>￥{{market.goods_type!=1? market.min_price:market.price}}</text>
						<text class="ml-2">{{market.goods_type!=1&&market.min_price!='--'? handleLang('起'):''}}</text>
					</view>
					<view class="flex flex-ai-center flex-js-end font-size-14" v-else>
						<view>￥--</view>
					</view>
				</view>
			</view>
		</view>
		<view class="market-out flex flex-ai-center flex-js-center" v-if="market.is_out">
			<w-image width="65" mode='widthFix' src='/static/bg/market-out1.png'></w-image>
		</view>
	</view> -->
</template>

<script>
	export default {
		name:'MarketCard',
		props:{
			market:{
				type:Object,
				default(){
					return {
						"id":'',
						"listimg": "",
						"total_num": 0,
						"reprice_limit": "--.--",
						"flux": 0,
						"min_price": 0,
						"is_out": 0,
						"new_time": 0,
						"goods_type": "2",
						"product": {
						    
						}
					}
				}
			},
			height:{
				type:Number,
				default:440
			}
		},
		data(){
			return {}
		},
		methods:{
			toDetails(){
				if(!this.isLogin){
					return uni.$emit('showLogin')
				}
				if(this.market.goods_type!=1){
					this.$u.route('/pages/market/marketGoodsList',{id:this.market.product.id,goodsType:this.market.goods_type})
				}else{
					this.$u.route('/pages/market/detail',{id:this.market.id})
				}
			},
			changeLike(item){
				this.$emit('changeStar',item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.item-box {
		width: 49%;		
		// background-color: #EC871F;
		border-radius: 24rpx;
		position: relative;
		// margin-bottom: 20rpx;
		.info-box {
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			.info {
				width: 100%;
				// height: 92px;
				background: rgba(255,255,255,0.1);
				mask-image: linear-gradient(to right, red, blue);
				border-radius: 8px 8px 8px 8px;
				border: 1px solid rgba(255,255,255,0.3);
				 backdrop-filter: blur(8px);
			}
		}
		.market-out {
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.3);
			border-radius: 24rpx;
			position: absolute;
			left: 0;
			top: 0;
		}
	}
	
	.name_price_box {
		background: #edecec;
		border-radius: 0 0 18rpx 18rpx;
		bottom: -18rpx;
		content: "";
		height: 18rpx;
		left: 30rpx;
		position: absolute;
		width: calc(100% - 60rpx);
		position: absolute;
		// bottom: 10; 
	}
	.market-card{
		position: relative;
		// background-image: url('@/static/bg/market-card-bg.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position: bottom;
		// border:1px solid hsla(0,0%,80%,.5);
		.img{
			position: relative;
			.star-box {
				position: absolute;
				top:16rpx;
				right: 16rpx;
				width: 29px;
				height: 29px;
				background: rgba(#101010, 0.65);
				border-radius: 0px 0px 0px 0px;
				border-radius: 50%;
			}
			.level{
				width: 360rpx;
				position: absolute;
				height: 36rpx;
				top: 20rpx;
				left: 20rpx;
				@extend .flex;
				.icon{
					position: absolute;
					left: -10rpx;
					top: -10rpx;
				}
				&-bg{
					padding-left: calc(56rpx);
					background: linear-gradient(180deg, #FFAF5E 0%, #EC871F 100%);
					@extend .font-color-white,.flex,.flex-center,.pr-16,.ptb-4;
					border-radius: 32rpx;
					font-size: 26rpx;
				}				
			}
			.info{
				position: absolute;
				width: 100%;
				height:56rpx;
				background-size: 332rpx 56rpx;
				background: rgba(0,0,0,0.2);
				padding-top: 10rpx;
				border-radius: 0rpx 0rpx 24rpx 24rpx;
				bottom: 0;
				left: 0rpx;
				line-height: 56rpx;
				backdrop-filter: blur(10rpx);
				font-weight: 400;
			}
			.market-out{
				position: absolute;
				bottom: 56rpx;
				right: 0;
			}
		}
		.number-box {
			border-radius: 8px 8px 8px 8px;
			border: 1px solid #EFEFEF;
			font-size: 15rpx;
			color: #8F8F8F;
			padding: 0 12rpx;
		}
	}
</style>